<template>
	<scroll-view  scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
		@scrolltolower="lower" @scroll="scroll">
		
		<view class="user">
			<text class="username">自建类型:</text>
			<view class="text_bj">				
							<picker @change="bindPickerChange2" :value="index2" :range="array2" range-key="name2" >
								<view class="uni-input">{{array2[index2].name2}}
								<uni-icons type="arrowright" style="float:right;padding-right:4px;"
								size="20" >
								</uni-icons>
								</view>				
							</picker>			
			</view>
		</view>
		
		<view class="titlebar">
			<text>用户信息</text>
		</view>
		<!-- 用户信息 -->
		<view class="user">
			<view class="username">
				<text>用户姓名:</text>
			</view>
			<view class="shurukuang">
			<input type="text" v-model="zj_name" placeholder="请输入姓名" />
			</view>
			
		</view>
		<hr />
	
		<view class="user">
			<view class="username">
				<text>联系电话:</text>
			</view>
			<view class="shurukuang">
			<input type="text" v-model="zi_phone" placeholder="请输入联系电话" />
			</view>
		</view>
		<hr />
	
		<view class="user">
			<view class="username">
				<text>所在区域:</text>
			</view>
				<view style="margin-left: 45px;">
					<view class="input" type="text" placeholder="请选择地区">
									<picker class="pickerList" mode="multiSelector" 
									:range="newProvinceDataList" 
									:value="multiIndex" 
									@change="pickerChange" 
									@columnchange="pickerColumnchange">
										<!-- <view>{{provinceDataList[0].name}}--{{provinceDataList[0].city[0].name}}--{{provinceDataList[0].city[0].area[0]}}</view> -->
										<view class="">{{select}}</view>
									</picker>
								</view>
							<!-- <picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
	                        <view style="margin-top: 5px;">{{multiArray[0][multiIndex[0]]}}{{multiArray[1][multiIndex[1]]}}{{multiArray[2][multiIndex[2]]}}
								<uni-icons class="text_bj2" type="arrowright" style="float:right;padding-right:1px;"
								size="20" >
								</uni-icons>
								</view>								
							</picker>	 -->										
				</view>
			</view>			
		</view>
		<hr />
		<view class="user">
			<view class="username">
				<text>详细地址:</text>
			</view>
			<view class="shurukuang">
			<input type="text" v-model="zj_detailed_address" placeholder="请输入详细地址" />
			</view>
		</view>
	
		<!-- 购买信息 -->
		<view class="titlebar">
			<text>产品资料</text>
		</view>	
		<view class="user">
			<view class="username">
				<text>产品类型:</text>
			</view>
			<view class="text_bj6">
				<view class="uni-list">
									
						<view class="uni-list-cell-db">
							<picker  @change="bindPickerChange" :value="index" :range="array" range-key="name">
								<view class="uni-input3">{{array[index].name}}
								<uni-icons class="text_bj4" type="arrowright" style="float:right;padding-right:4px;"
								size="20" >
								</uni-icons>
								</view>				
							</picker>
						</view>
			
				</view>												
			</view>			
		</view>
		<hr />
	
		<view class="user">
			<view class="username">
				<text>购买日期:</text>
			</view>
			<view class="text_bj3">
				<!-- 日期 -->
				<picker mode="date":value="date" :start="startDate"
				:end="endDate" @change="bindDateChange">
					<view class="uni-input4">{{date}}
					<!-- 图标 -->
					<uni-icons class="text_bj5" type="arrowright" style="float:right;padding-right:4px;"
					size="20" >
					</uni-icons>
					</view>
					
				</picker>
				
				
			</view>
			<!-- 输入日期 -->
			<view class="sr_input">
			
			</view>
			
		</view>
		<hr />
	
		<!-- 文本框 -->
		<view class="titlebar">
			<text>受理内容</text>		
		</view>
		
		<hr color="#a1a1a1"/>
		<view class="txt">
			<view>
			<input type="text" v-model="zj_Accepted" placeholder="请输入详细内容" />
			</view>
		</view>
		
		<hr />
		<!-- 提交按钮 -->
		<button class="tijiao" @click="zj_submit">提交</button>
		</view>
	
	</scroll-view>
</template>

<script>
	import provinceData from '../data/provinceData.js';
	export default{
		components:{
			provinceData
		},
		data() {
			/* 时间 */
			const currentDate = this.getDate({
				format: true
			})
			
			return {
				//省份
				oldpProvinceDataList: provinceData.data,
								newProvinceDataList:[
									[],[],[]
								],
								multiIndex: [0, 0, 0],
								select:'选择省市区',
								
								addressData:{
									name:'',
									phone:'',
									address:''
								},
								binhao:'1',
				/* 自建单绑定数据 */
				zj_type:"安装",             //自建类型
				zj_name:"",                //姓名
				zi_phone:"",              //电话
				zj_address:"广西南宁市西乡塘区",           //三级联动选择区域
				zj_detailed_address:"", //详细地址
				zj_product_type:"家具运送",   //产品类型
				zj_Purchasing_date:"", //购买日期
				zj_Accepted:"",     //受理内容
								
				date: currentDate,
				index:0,
				index2:0,
				array2: [{name2:'安装'},{name2: '维修'}],
				array: [{name:'家具运送'},{name: '电器安装'}, {name:'水管安装'}, {name:'外机配件'}],
				
			    multiArray: [
				   ['广西', '广东'],
				   ['南宁市', '北海市'],
				   ['西乡塘区', '青秀区', '武鸣区']
			],
			multiIndex: [0, 0, 0],

				}
		},				
		             //省份
					onLoad(){
								// console.log(this.oldpProvinceDataList);
								for(let i=0; i<this.oldpProvinceDataList.length; i++){
									// console.log(this.oldpProvinceDataList[i].name);
									this.newProvinceDataList[0].push(this.oldpProvinceDataList[i].name);
								}
								for(let i=0; i<this.oldpProvinceDataList[0].city.length; i++){
									// console.log(this.oldpProvinceDataList[0].city[i].name)
									this.newProvinceDataList[1].push(this.oldpProvinceDataList[0].city[i].name);
								}
								for(let i=0; i<this.oldpProvinceDataList[0].city[0].area.length; i++){
									// console.log(this.oldpProvinceDataList[0].city[0].area)
									this.newProvinceDataList[2].push(this.oldpProvinceDataList[0].city[0].area[i]);
								}
								// console.log(this.newProvinceDataList)
							},
					
				computed: {
					/* 时间 */
					startDate() {
						return this.getDate('start');
					},
					endDate() {
						return this.getDate('end');
					}
					
				},
				/* 时间 */
				methods: {
					       // 省市区确认事件
								pickerChange(e){
									this.multiIndex = e.detail.value;
									// 数组内的下标
									// console.log(this.multiIndex);
									// 获取省
									// console.log(this.newProvinceDataList[0][this.multiIndex[0]])
									// 获取市
									// console.log(this.newProvinceDataList[1][this.multiIndex[1]])
									// 获取区
									// console.log(this.newProvinceDataList[2][this.multiIndex[2]])
									this.select = `${this.newProvinceDataList[0][this.multiIndex[0]]}--${this.newProvinceDataList[1][this.multiIndex[1]]}--${this.newProvinceDataList[2][this.multiIndex[2]]}`
								},
								pickerColumnchange(e){
									// 第几列滑动
									// console.log(e.detail.column);
									// 第几列滑动的下标
									// console.log(e.detail.value)
									// 第一列滑动
									if(e.detail.column === 0){
										this.multiIndex[0] =  e.detail.value
										// console.log('第一列滑动');
										// this.newProvinceDataList[1] = [];
										this.newProvinceDataList[1] = this.oldpProvinceDataList[this.multiIndex[0]].city.map((item,index)=>{
											// console.log(item)
											return item.name
										})
										// console.log(this.multiIndex)
										if(this.oldpProvinceDataList[this.multiIndex[0]].city.length === 1){
											this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[0].area.map((item,index)=>{
												// console.log(item)
												return item
											})
										}else{
											this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[1]].area.map((item,index)=>{
												// console.log(item)
												return item
											})
										}
										// 第一列滑动  第二列 和第三列 都变为第一个
										this.multiIndex.splice(1, 1, 0)
										this.multiIndex.splice(2, 1, 0)
									}
									// 第二列滑动
									if(e.detail.column === 1){
										this.multiIndex[1] =  e.detail.value
										// console.log('第二列滑动');
										// console.log(this.multiIndex)
										this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].city[this.multiIndex[1]].area.map((item,index)=>{
											// console.log(item)
											return item
										})
										// 第二列 滑动 第三列 变成第一个
										this.multiIndex.splice(2, 1, 0)
									}
									// 第三列滑动
									if(e.detail.column === 2){
										this.multiIndex[2] =  e.detail.value
										// console.log('第三列滑动')
										// console.log(this.multiIndex)
									}
								},
								
							
					
				     //提交自建单数据
					 /* zj_submit:function(){
					 	var self = this
					 	this.$axios({
					 		method:'get',
							url:this.$api + '/sas/asdas/adad'
					      data:{
						   name:this.zjname
					}
					 	})
					}, */
					//获取当前日期
					getTime: function() {
						var date = new Date(),
							year = date.getFullYear(),
							month = date.getMonth() + 1,
							day = date.getDate();
						// hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
						// minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
						// second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
						month >= 1 && month <= 9 ? (month = "0" + month) : "";
						day >= 0 && day <= 9 ? (day = "0" + day) : "";
						var timer = year + '-' + month + '-' + day;
						// var timer = year + '-' + month + '-' + day+ ' ' + hour + ':' + minute + ':' + second;
						return timer;
						this.zj_Purchasing_date = Data().detail.value
						console.log(this.zj_Purchasing_date)
		},
					/* 自建类型 */
					bindPickerChange2:function(e){
						this.index2 = e.detail.value
						this.zj_type = this.array2[e.detail.value].name2
						console.log(this.zj_type)
						
					},
					/* 产品类型 */
					bindPickerChange: function(e) {
						console.log('picker发送选择改变，携带值为：' + e.detail.value)
						this.index = e.detail.value
						this.zj_product_type = this.array[e.detail.value].name
						console.log(this.zj_product_type)
					},
					/* 省份 */
					/* bindMultiPickerColumnChange: function(e) {
						console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
						this.multiIndex[e.detail.column] = e.detail.value					
						// console.log("d:"+this.multiIndex[e.detail.column])
						// console.log("55"+e.detail.column)
						// console.log("e的值"+e)
						// console.log("e的解析值"+e.detail.value)
					    this.zj_address = this.multiArray[0][e.detail.value[0]]+this.multiArray[1][e.detail.value[1]]+this.multiArray[2][e.detail.value[2]] */
						
										
						/* switch (e.detail.column) {
							case 0: //拖动第1列
								switch (this.multiIndex[0]) {
									case 0:
										this.multiArray[1] = ['南宁市', '北海市']
										this.multiArray[2] = ['西乡塘区', '青秀区', '武鸣区']
										break
									case 1:
										this.multiArray[1] = ['深圳市', '汕头市']
										this.multiArray[2] = ['南山区', '龙岗区']
										break
								}
								this.multiIndex.splice(1, 1, 0)
								this.multiIndex.splice(2, 1, 0)
								break
							case 1: //拖动第2列
								switch (this.multiIndex[0]) { //判断第一列是什么
									case 0:
										switch (this.multiIndex[1]) {
											case 0:
												this.multiArray[2] = ['西乡塘区', '青秀区', '武鸣区']
												break
											case 1:
												this.multiArray[2] = ['银海区','北部湾']
												break
										}
										break
									case 1:
										switch (this.multiIndex[1]) {
											case 0:
												this.multiArray[2] = ['南山区', '龙岗区']
												break
											case 1:
												this.multiArray[2] = ['潮阳区', '金平区']
												break
										}
										break
								}
								 this.multiIndex.splice(2, 1, 0)
								break
						}
						this.$forceUpdate()
					}, */
					/* 日期 */
					bindDateChange: function(e) {
						this.date = e.target.value
						this.zj_Purchasing_date = e.target.value
						console.log(this.zj_Purchasing_date)
					},
					
					getDate(type) {
						const date = new Date();
						let year = date.getFullYear();
						let month = date.getMonth()+1;
						let day = date.getDate();
				
						if (type === 'start') {
							year = year - 60;
						} else if (type === 'end') {
							year = year + 10;
						} 
						month = month > 9 ? month : '0' + month;
						day = day > 9 ? day : '0' + day;
						return `${year}-${month}-${day}`;
					}
				}
				            
	}
	
			
			
</script>

<style lang="scss">
	.shurukuang{
		margin-left: 50px;
	}
	.tijiao{
		width: 70px;
		height: 45px;
		margin-top: 30px;
		background-color: #c7c7c7;
	}
	.txt{
		height: 120px;
		
	}
	.uni-input{
		height: 20px;
		margin-left: 20px;
		text-align: center;
		size: 20;
		
	}
	.uni-input2{
		height: 30px;
		background-color: #007AFF;
		//margin-top: 5px;		
		//text-align: center;
	
	}
	// .uni-input3{
	// 	height: 40px;
	// 	background-color: #09BB07;
	// 	//margin-left: 20px;
	// 	//text-align: center;
	// 	size: 20;
	// }
	// .uni-input4{
	// 	height: 20px;
	// 	margin-left: 20px;
	// 	text-align: center;
	// 	size: 20;
	// }
	.navtop {
		margin-top: 10px;
		padding-top: 15px;
		width: auto;
	}
	
	.btn {
		font-size: 5px;
	
	}
	
	button::after {
		border: none;
	
	}
	
	.text {
		color: #007AFF;
	}
	
	/* 提交 */
	.btn_bc {
		
		position: absolute;
		right: 65px;
		top: 10px;
	
	}
	
	/* 提交 */
	.btn_tj {
		
		position: absolute;
		right: 5px;
		top: 10px;
	}
	
	/* 通用样式 */
	.userdata {
		font-size: 14px;
		/* margin-bottom: 100px; */
		padding-top: 5px;
		padding-bottom: 5px;
		
	}
	.titlebar{
		font-size: 14px;
			/* margin-bottom: 100px; */
			padding-top: 5px;
			padding-bottom: 5px;
			background-color: #d4d1d0;
	}
	.user {
		font-size: 15px;
		display: flex;
		
	
	}
	
	.username {
		width: 65px;
		/* background-color: #4CD964; */
		padding-top: 5px;
		padding-bottom: 5px;
	
	}
	
	.sr_input {
	
		padding-top: 4px;
		padding-bottom: 6px;
	}
	
	.btn_xh {
		position: relative;
		/* background-color: #4CD964; */
		float: right;
		left: 200px;
	}
	
	
	.text_ty{
		font-size: 12px;
		margin-left: 40px;
		margin-right: 30px;
	}
	.text_xty{
		font-size: 12px;
		margin-left: 30px;
		margin-right: 30px;
	}
	.text_bj {
		font-size: 14px;
		padding-top: 5px;
		padding-bottom: 5px;
		margin-left: 205px;
	}
	.text_bj2{
		//background-color: #8A6DE9;
		font-size: 14px;
		//padding-top: 5px;
		//padding-bottom: 5px;
		margin-left: 75px 
	}
	.text_bj6{
		
		font-size: 14px;
		padding-top: 5px;
		padding-bottom: 5px;
		margin-left: 50px 
	}
	.text_bj4{
		margin-left: 145px 	
	}
	.text_bj3{
		font-size: 14px;
		padding-top: 5px;
		padding-bottom: 5px;
		margin-left: 45px
	}
	.text_bj5{
		margin-left: 135px;
	}
	.txtcolor{
		color: #C8C7CC;
	}
	
</style>
